/*
    加check-group后样式冲突的问题
*/
$border_color: #dfe6ec;
$date_num_color: #808695;
$shift_color: #ff9900;
$group_color: #2b85e4;
.el-checkbox-group {
	font-size: 1px;
}

.schedule-container {
	.date-nav {
		width: 100%;
		font-weight: bold;
		border-radius: 8px 8px 0 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 8px 0;
		.month-title {
			font-size: 32px;
			letter-spacing: 3px;
			font-weight: 700;
			color: #515a6e;
			//font-family: Serif;
		}
		.month-title div:hover {
			color: #2d8cf0;
			cursor: pointer;
		}
		.current-month {
		}

	}

	.week-header-container {
		width: 100%;
		border-radius: 6px 6px 0 0;
		overflow: hidden;
		border: 1px solid #dcdee2;
		border-bottom: none;
		.week-header {
			width: calc(100% / 7);
			height: 40px;
			display: inline-block;
			//background: #2d8cf0;
			//color: #fff;
			//border-right: 1px solid #5cadff;
			background: #f8f8f9;
			line-height: 40px;
			text-align: center;
			box-sizing: border-box;
		}
	}
	.week-header-container .week-header:last-child {
		border-right: none;
	}

	.date-container {
		max-height: calc(100vh - 230px);
		overflow: auto;
		border: solid 1px #dcdee2;
		border-top: solid 1px #dcdee2;
		border-bottom: none;
		box-sizing: border-box;
		scrollbar-width: none!important;
		border-radius: 0 0 6px 6px;
		.date-body {
			width: 100%;
			display: flex;
			background: #fff;
			.date-body-item {
				width: calc(100% / 7);
				min-height: 100px;
				display: table;
				font-size: 14px;
				padding: 4px 2px 4px 2px;
				color: #ccc;
				text-align: center;
				border-bottom: 1px solid $border_color;
				border-right: 1px solid $border_color;
				position: relative;
				box-sizing: border-box;
				//font-family: Serif;
				.check-box-position {
					position: absolute;
					left: 6px;
					top: 4px;
				}
				.date-item-num {
					line-height: 32px;
					position: absolute;
					top: 0;
					right: 4px;
					font-size: 24px;
					font-family: Serif;
					color: $date_num_color;
					z-index: 1;
					font-weight: 100;
				}
				.date-item-schedule {
					width: 100%;
					font-size: 12px;
					line-height: 16px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: flex-start;
					z-index: 2;
					.schedule-circle-icon {
						width: 4px;
						height: 4px;
						border-radius: 50%;
						background: $shift_color;
					}
					.calendar-shift-type {
						font-size: 14px;
						font-weight: 100;
						width: 100%;
						color: #808695;
						margin-bottom: 4px;
						margin-top: 10px;
					}
					.group-bar {
						width: 100%;
						display: flex;
						margin-top: 4px;
						align-items: center;
						flex-wrap: wrap;
						//background: #F2F8FE;
						//  background: #feeee9;
						border-radius: 4px;
						padding: 2px 2px 2px 4px;
						.shift-item-name {
							//font-weight: bold;
							margin-left: 2px;
							text-align: left;
							white-space: nowrap;
							color: $shift_color;
						}

						.group-bar-item {
							margin-right: 6px;

						}
						.group-item {
							color: #808695;
							white-space: nowrap;
							margin-left: 4px;
						}
						.group-item:hover {
							color: $group_color;
							cursor: pointer;
						}
					}
				}
				.date-item-schedule-null {
					width: 90%;
					height: 24px;
					font-size: 16px;
					font-weight: 100;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					color: #c5c8ce;
					cursor: pointer;
					position: absolute;
					top: 50%;
					margin-top: -12px;
				}
			}
			.date-body-item:hover {
				background: #e8f4ff;
				transition: .2s;
				//border-radius: 10px;
				//  box-shadow: 0 0 0px 2px #2d8cf0;
				//  border-radius: 10px;
				.date-item-num {
					//color: #1890ff;
				}
				.calendar-shift-type {
					color: #1890ff;
				}
				.group-bar {
					background: #fff;
				}
			}
		}
		.date-body .date-body-item:last-child {
			border-right: none;
		}
	}
	.date-container::-webkit-scrollbar{
		overflow: hidden;
		scrollbar-width: none!important;
		width: 0!important;
		height: 0;
	}
}





